<template lang="html">
  <div id="personal">
    <div class="personal-top">
      <div class="avatar"><img :src="headimgurl" alt="a"></div>
      <!--个人收入-->
      <div class="me-info">
        <div class="henxian"></div>
        <div class="me_bg">
          <div class="me-main">
            <h5 >红包已存入<span style="color: red" v-text="telVal"></span>的鲸鱼账户中</h5>
            <h1><label v-text="total_money"></label><span>元</span></h1>
            <p v-text="shouyi"></p>
          </div>
        </div>
      </div>
      <!--收益-->
      <div class="profit">
        <h4 class="getRmb">已有<span v-text="total_rank_num"></span>名玩家参与发财老虎机<br />累计获得红包 <span v-text="total_rank_money"></span>元</h4>
        <a :href="openJinrUrl" v-text="registerStr"></a>
        <ul class="liuchen-info">
          <li >老虎机<br />8888</li>
          <li >注册领<br />5000</li>
          <li >邀请赚<br />10000</li>
          <li >投资多少<br />送多少</li>
        </ul>

        <p>每邀请一个好友成功注册可获得1000元<br />最多可获得10000元</p>
      </div>

    </div>
    <!--选项卡-->
    <div class="tabs">
      <ul class="tab">
        <li class="li-tab" v-for="(item,index) in tabsParam"
            @click="toggleTabs(index)"
            :class="{active:index===nowIndex, brLfet:nowIndex===1,brRight:nowIndex===0 }">{{item}}</li>
      </ul>
      <div class="me-info">
        <div class="henxian"></div>
        <div class="me_bg">
          <div class="me-main">
            <!--邀请为0的状态-->
            <div class="zero" v-if="!nowIndex && list.length == 0">分享赚取更多红包</div>
            <!--邀请-->
            <ul class="invitation" v-show="nowIndex == 0" v-if="!list.length == 0">
              <li v-for="(item, index) in list">
                 <div class="li_yonghu">
                  <img :src="item.headimgurl" alt="a">
                  <p v-text="item.nickname"></p>
                  <span v-text="item.c_time"></span>
                </div>
                <div class="heGet" >获得<span v-text="item.hb_money"></span>元</div>
              </li>
            </ul>
            <!--排行榜-->
            <ul class="ranking" v-show="nowIndex == 1">
              <li v-for="(item, index) in res_list" >
                <div :class="{isMinciNO1:index==0, isMinciNO2:index==1, isMinciNO3:index==2}" v-show="(index==0 || index==1 || index==2)"></div>
                <div v-show="!(index==0 || index==1 || index==2)" class="ming">{{index+1}}</div>
                <div class="in-yonghu">
                  <img :src="item.headimgurl" alt="xiao">
                  <span v-text="item.nickname"></span>
                </div>
                <p class="getRmb" >获得<span v-text="item.u_event_total_money"></span>元</p>
              </li>
            </ul>
          </div>
        </div>
        <!--地下文字-->
        <div class="diwen">
          <h3>已邀请好友：<label v-text="total_rank_num"></label>人</h3>
          <h4>累计赚取红包：<label v-text="total_rank_money"></label>元</h4>
        </div>
      </div>
      <!--文字-->
      <p>注：若你的好友未注册成功，您无法获得红包哦！<br />红包存入您手机号注册的鲸鱼账户中，<br />有效期1天，收益可提现到银行卡。</p>
    </div>
    <follow></follow>
    <jrWarm :showWarn="showWarn" :warnInfo="warnInfo"></jrWarm>
  </div>
</template>

<script type="text/ecmascript-6">
  import follow from './Follow.vue'
  import jrWarm from './JrWarn.vue'
  import wx from 'weixin-js-sdk'

export default {
  props: {
    is_register: Boolean,
    total_money: String,
    headimgurl: String,
    res_list: Array,
    list: Array,
    shareurl: String,
    appId: String,
    timestamp: Number,
    nonceStr: String,
    signature: String,
    u_event_total_money: String,
    total_rank_num: {
      type: String,
      default: '0'
    },
    total_rank_money: {
      type: String,
      default: '0'
    },
    host: {
      type: String,
      default: ''
    },
    hb_key: {
      type: String,
      default: ''
    },
    telVal: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      tabsParam: ['我的邀请红包','排行榜'],//（这个也可以用对象key，value来实现）
      nowIndex: 1,//默认第一个tab为激活状态
      showWarn: false,
      warnInfo: '',
      count: 0,
      isMinci: false,
      invitation: [
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得50元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得5010元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得400元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得570元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得560元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得5000000000元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得510元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得1500元"},
        {name: "hxzsd", date: '04-13 09:22', getRmb: "获得4500元"},
      ],
      ranking: [
        {name: "hxzsd", getRmb: "获得500元"},
        {name: "hxzsd", getRmb: "获得1500元"},
        {name: "hxzsd", getRmb: "获得2500元"},
        {name: "hxzsd", getRmb: "获得2500元"},
        {name: "hxzsd", getRmb: "获得2500000元"},
        {name: "hxzsd", getRmb: "获得2500元"},
        {name: "hxzsd", getRmb: "获得2500元"},
        {name: "hxzsd", getRmb: "获得2500元"},
        {name: "hxzsd", getRmb: "获得2500元"},
      ],
      tipHb: '红包已存入155****7219的鲸鱼账户中',
      rmb: '1062',
      shouyi: '年化收益5%以上高收益活期理财产品',
      openJinrUrl: 'javascript:;',
      userNum: '222222222222222',
      totalRmb: '189224',
      allToal: '77777',
      url: '/HunanLaohuji/hblist',
      urlRegister: './register.html/?',
    }
  },
  computed: {
    registerStr() {
      if(this.is_register){
        this.openJinrUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.jinr.core'
        return '打开鲸鱼领取收益'
      }
      this.openJinrUrl = 'http://'+this.host+'/VueApp/View/register.html?hb_key='+this.hb_key+'&telVal='+this.telVal
      return '注册再领5000元'
    }

  },
  created () {


  },
  mounted () {

    this.wxinit()
  },
  methods:{
    toggleTabs:function(index){
      console.log(index)
      this.nowIndex=index;
    },
    registerFun() {
      let params = {
        host: this.host,
        telVal: this.telVal,
        hb_key: this.hb_key,
      }
      let allUrl = this.initGetUrl(this.urlRegister, params)
//      window.location.href = allUrl
      this.warnInfo = 'allUrl'
      this.showWarn = true
      console.log(allUrl)
    },
    initGetUrl: function(url, params){
      return url+ params
    },

    //微信分享
    wxinit() {
      wx.config({
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入
        //的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        debug: true,
        appId: this.appId, // 必填，公众号的唯一标识
        timestamp: this.timestamp,  // 必填，生成签名的时间戳
        nonceStr: this.nonceStr,  // 必填，生成签名的随机串
        signature: this.signature,  // 必填，签名，见附录1
        // 必填，需要使用的JS接口列表，
        jsApiList: [
          'checkJsApi',
          'onMenuShareTimeline', //
          'onMenuShareAppMessage', //
          'onMenuShareQQ',
          'onMenuShareWeibo',
          'onMenuShareQZone',
          'showMenuItems',
          'showOptionMenu'
        ]
      });
      wx.ready(() => {
        var shareObj = { //
          title: '这个老虎机厉害了！才玩一会儿我就摇到'+this.total_money+'元！！！', //
          desc: '赤裸裸的红包一路发发发~',
          link: this.shareurl,
          imgUrl: 'http://'+this.host+'/VueApp/View/images/wx_share.jpg',
        };
        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline({
          title: shareObj.title, //
          desc: shareObj.desc, // 描述
          link: shareObj.link, //
          imgUrl: shareObj.imgUrl, //
          success: function(res) {},
          cancel: function(res) {}
        });
        //分享到好友
        wx.onMenuShareAppMessage({
          title: shareObj.title, // 标题
          desc: shareObj.desc, // 描述
          link: shareObj.link, // 链接
          imgUrl: shareObj.imgUrl, // 图片
          success: (res) => {},
          cancel: (res) => {},
        });        //
        wx.onMenuShareQQ({
          title: shareObj.title,
          desc: shareObj.desc,
          link: shareObj.link,
          imgUrl: shareObj.imgUrl,
          success: (res) => {},
          cancel: (res) => {},
        });

        //
        wx.onMenuShareWeibo({
          title: shareObj.title,
          desc: shareObj.desc,
          link: shareObj.link,
          imgUrl: shareObj.imgUrl,
          success: (res) => {},
          cancel: (res) => {},
        });

        //
        wx.onMenuShareQZone({
          title: shareObj.title,
          desc: shareObj.desc,
          link: shareObj.link,
          imgUrl: shareObj.imgUrl,
          success: (res) => {},
          cancel: (res) => {},
        });
      });
      wx.error((res)=> {
        //
        console.log('失败--')
        console.log(res)
      });
    },
  },
  // 注册组件
  components: {
    follow,
    jrWarm
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../common/style/base.styl'

#personal
  background url("../assets/logo_top.png") no-repeat rem(38) rem(18)
  background-size rem(192) rem(60)
  .personal-top
    padding rem(50) 0 0
    text-align center
    .avatar
      width rem(170)
      height rem(170)
      margin 0 auto rem(36)
      overflow hidden
      border rem(3) #ffffff solid
      border-radius 50%
      img
        width rem(172)
        height rem(172)
  .me-info
    width rem(712)
    padding-top rem(24)
    padding-bottom rem(20)
    margin -2px auto rem(60)
    background #f5c519
    .henxian
      height rem(12)
      margin 0 rem(7) rem(12)
      border-radius rem(6)
      background-color #c45e00
    .me_bg
      width rem(670)
      margin 0 auto
      padding-bottom rem(14)
      background url("../assets/sawtooth.png") no-repeat center bottom
      background-size rem(670)
      .me-main
        background-color #ffe88e
        /*min-height 1rem*/
        color #cc0e28
        h5
          padding-top rem(24)
          line-height rem(58)
          text-align center
          font-size rem(28)
          color #cc0e28
        h1
          line-height rem(187)
          font-size rem(111)
          font-weight bold
          span
            font-size rem(55)
            font-weight normal
        p
          font-size rem(28)
          line-height rem(70)
          color #c45e00


  .profit
    margin-bottom rem(50)
    font-size rem(28)
    color #ffffff
    p
      line-height rem(38)
      padding-bottom rem(20)
      background url('../assets/line.png') no-repeat center bottom
      background-size 100%
    a
      display block
      width rem(324)
      height rem(74)
      margin 0 auto rem(44)
      line-height rem(74)
      font-size rem(33)
      border-radius rem(10)
      background-color #ffcc21
      color #ffffff
    .liuchen-info
      margin  0 rem(28) rem(75)
      display -webkit-box
      display -webkit-flex
      display flex
      -webkit-justify-content space-between
      justify-content space-between
      background url("../assets/arrow.png") no-repeat rem(138) center, url("../assets/arrow.png") no-repeat rem(328),url("../assets/arrow.png") no-repeat rem(519) center
      li
        width rem(120)
        padding rem(20) 0
        line-height rem(40)
        border rem(3) #f5c519 solid
        background-color #ffe88e
        color #cc0e28
    h4.getRmb
      line-height rem(42)
      padding-bottom rem(44)
      span
        color #fc4c60

  .tabs
    color #c45e00
    .tab
      padding 0 rem(34) rem(47)
      display -webkit-box
      display -webkit-flex
      display flex
      -webkit-justify-content space-between
      justify-content space-between
      li.li-tab
        float left
        width rem(324)
        text-align center
        font-size rem(33)
        line-height rem(74)
        border-radius rem(7)
        background-color #ffcc21
        color #ffffff
      li.active
        background-color  #fc4c60
    &>p
      padding 0 rem(30) rem(60)
      line-height rem(40)
      font-size rem(28)
      color #ffffff
    .diwen
      padding rem(10) rem(34) rem(20)
      font-size rem(28)
      h3
        float left
      h4
        float right
    .me-main
      width 100%
      min-height rem(450)
      overflow hidden
      padding-top rem(10)
      padding-bottom rem(10)
    .zero
      text-align center
      line-height rem(450)
      font-size rem(28)
      color #c45e00
    ul.ranking
      width 100%
      height rem(450)
      overflow auto
      li
        display -webkit-box
        display -webkit-flex
        display flex
        -webkit-justify-content space-between
        justify-content space-between
        padding rem(10) 0
        margin 0 rem(42)
        border-bottom 1px #e1a347 solid
        overflow hidden
        .ming
          width rem(100)
          text-align center
          font-weight bold
          font-size rem(30)
          line-height rem(100)
          color #c45e00
        .in-yonghu
          flex-grow 1.8
          margin-left rem(10)
          img
            float left
            width rem(100)
            height rem(100)
            margin-right rem(20)
            border-radius 50%
          span
            font-size rem(28)
            line-height rem(100)
            color #c45e00
        p.getRmb
          line-height rem(100)
          color #cc0e28
        .isMinciNO1
          width rem(100)
          background url("../assets/NO1.png") no-repeat  center
          background-size rem(80)
        .isMinciNO2
          width rem(100)
          background url("../assets/NO.2.png") no-repeat  center
          background-size rem(70)
        .isMinciNO3
          width rem(100)
          background url("../assets/NO.3.png") no-repeat  center
          background-size rem(60)
    ul.invitation
      width 100%
      height rem(450)
      overflow auto
      li
        display -webkit-box
        display -webkit-flex
        display flex
        -webkit-justify-content space-between
        justify-content space-between
        padding rem(21) rem(30)
        font-size rem(28)
        background url("../assets/line_li.png") no-repeat center bottom
        background-size rem(668) auto
        color #c45e00
        .li_yonghu
          width 60%
          img
            float left
            width rem(100)
            height rem(100)
            margin-right rem(24)
            border-radius 50%
            background-color #ffffff
        .heGet
          line-height rem(100)
          color #cc0e28





</style>
